<template>
  <view>
    <view>
      <!-- 自定义导航栏 -->
      <view class="navBarBox">
        <!-- 状态栏占位 -->
        <view :style="{ paddingTop: statusBarHeight + 'px' }"></view>
        <!-- 真正的导航栏内容 -->
        <view class="navBar">
          <navigator url="/packageMy/myInformation/myInformation" class="wbk">
            <view class="nbk card-container">
              <image class="logo" src="/static/touxiang.png" mode="scaleToFill"></image>
              <view class="grxx">
                <view class="name">张毅</view>
                <view class="phone">18893209839</view>
              </view>
            </view>
          </navigator>
        </view>
      </view>
      <view class="main">
        <navigator class="yhq" url="/packageMy/myCoupon/myCoupon">
          <view>
            <image class="yhq-tp" src="/static/彩色-优惠券@2x.png" mode=""></image>
            我的优惠券
          </view>
          <view>
            3张
            <image class="yjt-tp" src="/static/收起箭头小@2x.png" mode=""></image>
          </view>
        </navigator>
        <view class="dingdan">
          <view class="dingdan-top">
            <view>
              我的订单
            </view>
            <navigator @click="navTo(0)">
              全部订单
              <image class="qbdd" src="/static/收起箭头小@2x.png" mode=""></image>
            </navigator>
          </view>
          <view class="dingdan-bot">
            <view class="dzf" @click="navTo(1)">
              待支付
            </view>
            <view class="dsy" @click="navTo(2)">
              待使用
            </view>
            <view class="dpj" @click="navTo(3)">
              待评价
            </view>
          </view>
        </view>
        <view class="wdfw">
          <view class="fuwu-top">
            <view>
              我的服务
            </view>
          </view>
          <view class="fuwu-bot">
            <navigator class="fuwu" url="/packageMy/couponCenter/couponCenter">
              <image src="/static/组 9@2x(3).png" mode=""></image>
              <view>领券中心</view>
            </navigator>
            <navigator class="fuwu" url="/packageMy/newsCenter/newsCenter">
              <image src="/static/组 9@2x(4).png" mode=""></image>
              <view>消息中心</view>
            </navigator>
            <navigator class="fuwu" url="/packageMy/vehicle/myVehicles/myVehicles">
              <image src="/static/组 9@2x(5).png" mode=""></image>
              <view>我的车辆</view>
            </navigator>
            <navigator class="fuwu" url="/packageMy/costRecord/costRecord">
              <image src="/static/组 9@2x(6).png" mode=""></image>
              <view>消费记录</view>
            </navigator>
            <navigator class="fuwu" url="/packageIndex/repair/myRepair/myRepair">
              <image src="/static/组 9@2x(7).png" mode=""></image>
              <view>我的维修</view>
            </navigator>
            <view class="fuwu">
              <image src="/static/组 9@2x(8).png" mode=""></image>
              <view>意见反馈</view>
            </view>
            <view class="fuwu">
              <image src="/static/组 9@2x(9).png" mode=""></image>
              <view>收获地址</view>
            </view>
            <navigator class="fuwu" url="/packageMy/realNameVerification/realNameVerification">
              <image src="/static/组 9@2x(9).png" mode=""></image>
              <view>实名认证</view>
            </navigator>
          </view>
        </view>
        <view class="tcdl" @click="logout">
          退出登录
        </view>
        <view class="kongbai"></view>
      </view>
    </view>
    <MagicNavigationBar
      :items="items"
      :digHolePosition="1"
      :selectedColor="selectedColor"
      :color="color"
      @onTabSelect="onTabSelect"
      :current="currentTab"
      :background-color="backgroundColor"
      :screenBackgroundColor="screenBackgroundColor"
      :indicatorPadding="indicatorPadding"
      :indicatorSize="indicatorSize"
      :indicatorBackground="indicatorBackground"
    >
      <!-- 圆形指示器的内容有插槽实现。 -->
      <template #indicatorContent>
        <view style="display: flex; justify-content: center; width: 100%; height: 100%;">
          <image @click="goEmergency" :src="img" style="width: 30px; height: 30px; align-self: center;"></image>
        </view>
      </template>
    </MagicNavigationBar>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import MagicNavigationBar from '@/uni_modules/jorbin-DigHoleNavigationBar/components/jorbin-DigHoleNavigationBar/jorbin-DigHoleNavigationBar.vue'

// 使用 ES Module 导入图片资源（data 内部用到的图片）
import warningImg from '@/static/warning.png'
import indexLine from '@/static/index_line.png'
import indexIcon from '@/static/index.png'
import myLine from '@/static/my_line.png'
import myIcon from '@/static/my.png'

// 响应式变量
// const userInfo = ref({})
const userInfo = ref(111)

const statusBarHeight = ref(0)
const navBarHeight = ref(93) // 82+11
const img = ref(warningImg)
const selectedColor = ref('#2979ff')
const color = ref('#666666')
const currentTab = ref(2)
const backgroundColor = ref('#ffffff')
const screenBackgroundColor = ref('#f5f5f5')
const indicatorPadding = ref(8)
const indicatorSize = ref(75)
const indicatorBackground = ref('#ff0000')

// 导航栏数据（图片使用上面导入的资源）
const items = ref([
  {
    icon: {
      src: indexLine,
      width: 30,
      height: 30
    },
    text: '首页',
    selectedIcon: {
      src: indexIcon
    },
    url: '/pages/index/index'
  },
  {
    type: 'indicator',
    text: '上传',
    url: '/pages/emergencyRescue/emergencyRescue'
  },
  {
    icon: {
      src: myLine,
      width: 30,
      height: 30
    },
    text: '我的',
    selectedIcon: {
      src: myIcon
    },
    url: '/pages/my/my'
  }
])

// 方法定义
const onTabSelect = (index, item) => {
  uni.redirectTo({
    url: item.url
  })
}

const goEmergency = () => {
  uni.redirectTo({
    url: "/pages/emergencyRescue/emergencyRescue"
  })
}

const goOrder = (status) => {
  uni.navigateTo({
    url: "/packageMy/MyOrders/MyOrders?status=" + status
  })
}

//订单跳转
function navTo(status){
		uni.navigateTo({
			url:"/packageMy/MyOrders/MyOrders",
			success:function(res){
				 // 通过eventChannel向被打开页面传送数据
					res.eventChannel.emit('status', status)
			}
		})
}

const logout = () => {
  // 获取全局 app 对象
  const app = getApp()
  const uid = app.globalData.userInfo.id
  uni.request({
    url: 'http://localhost:8080/user/user/logout',
    method: 'GET',
    data: {
      id: uid
    },
    success: (res) => {
      if (res.data.code === 200) {
        // 删除本地存储的用户信息和 token
        uni.removeStorageSync('userInfo')
        uni.removeStorageSync('token')
        // 删除全局对象中的用户信息
        app.globalData.userInfo = {}
        uni.showToast({
          title: '退出登录成功',
          icon: 'none'
        })
        // uni.redirectTo({
        //   url: "/packageMy/login/login"
        // })
      } else {
        uni.showToast({
          title: '服务器异常，请稍后再试！',
          icon: 'error'
        })
      }
    },
    fail: (err) => {
      console.error('请求失败:', err)
      uni.showToast({
        title: '请求失败',
        icon: 'none'
      })
    }
  })
}

// 生命周期钩子
onLoad((option) => {
  const app = getApp()
  // console.log(app.globalData.userInfo)
  // console.log(uni.getStorageSync('token'))
  // userInfo.value = app.globalData.userInfo
  // if (!app.globalData.userInfo) {
  //   uni.navigateTo({
  //     url: "/packageMy/login/login"
  //   })
  // }
})

onMounted(() => {
  // 获取手机状态栏高度
  const sysInfo = uni.getSystemInfoSync()
  statusBarHeight.value = sysInfo.statusBarHeight
})
</script>

<style scoped>
.navBarBox {
  /* background-image: url("https://mly-demo.oss-cn-beijing.aliyuncs.com/dhlbj.png"); */
  background-color: #5B8EFE;
  background-size: contain;
  color: #fff;
}

.navBar {
  padding: 20px;
}
.card-container {
  display: flex;
  align-items: center;
  /* background: #fff; */
  padding: 20px;
  border-radius: 16px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}
.logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}
.grxx {
  display: flex;
  flex-direction: column;
}
.name {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8px;
}
.phone {
  font-size: 20px;
  color: #ffffff;
}

.main {
  padding: 0 20rpx;
}

.yhq {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 40rpx 0;
  font-size: 32rpx;
  border-radius: 20rpx;
  bottom: 60rpx;
  position: relative;
}

.yhq-tp {
  width: 50rpx;
  height: 50rpx;
  vertical-align: middle;
  margin: 0 30rpx;
}

.yjt-tp {
  width: 20rpx;
  height: 30rpx;
  vertical-align: middle;
  margin: 0 30rpx;
}

.dingdan {
  background-color: #fff;
  padding: 40rpx 30rpx;
  font-size: 32rpx;
  border-radius: 20rpx;
  position: relative;
  bottom: 30rpx;
}

.dingdan-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.dingdan-bot {
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  text-align: center;
  line-height: 100rpx;
  color: #fff;
  border-top: 10rpx solid #F7F7F7;
}

.qbdd {
  width: 20rpx;
  height: 30rpx;
  vertical-align: middle;
  margin-left: 30rpx;
}

.dzf {
  background-image: url("/static/组 9@2x(0).png");
  width: 200rpx;
  height: 100rpx;
  background-size: 200rpx 100rpx;
}

.dsy {
  background-image: url("/static/组 9@2x(1).png");
  width: 200rpx;
  height: 100rpx;
  background-size: 200rpx 100rpx;
}

.dpj {
  background-image: url("/static/组 9@2x(2).png");
  width: 200rpx;
  height: 100rpx;
  background-size: 200rpx 100rpx;
}

.wdfw {
  background-color: #fff;
  padding: 40rpx 30rpx;
  font-size: 32rpx;
  border-radius: 20rpx;
}

.fuwu-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.fuwu-bot {
  display: flex;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  text-align: center;
  border-top: 10rpx solid #F7F7F7;
  flex-wrap: wrap;
}

.fuwu {
  width: 150rpx;
  margin-left: 10rpx;
  margin-top: 20rpx;
}

.fuwu image {
  width: 80rpx;
  height: 60rpx;
  margin: 20rpx 0;
}

.tcdl {
  width: 600rpx;
  height: 80rpx;
  background-color: #D9D9D9;
  margin: 80rpx auto;
  border-radius: 40rpx;
  color: #fff;
  text-align: center;
  line-height: 80rpx;
}

.kongbai {
  height: 50rpx;
  margin-top: 250rpx;
}
</style>
